<template>
  <div>
    <div class="filter-line flx-row-s-c">
      <span class="item-name">审核状态</span>
      <Select v-model="status" style="width: 120px; margin-right: 10px">
        <Option
          v-for="(item, index) in statusList"
          :value="item.value"
          :key="'s' + index"
          >{{ item.label }}</Option
        >
      </Select>
      <span class="item-name">模板名称</span>
      <Input
        v-model.trim="name"
        placeholder="请输入"
        maxlength="30"
        style="width: 180px"
      />
      <div
        class="user-strong-button line-button-size"
        style="margin: 0 10px 0 30px"
        @click="pageChange(1)"
      >
        搜索
      </div>
      <div class="user-normal-button line-button-size" @click="reset">重置</div>
    </div>

    <div class="listTable-area pub-m-t-15">
      <div style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="filter-line search-result-line flx-row-bw-c">
          <span class="f-14 c-g"
            >搜索结果共<span class="c-black">{{
              total != null ? ` ${total} ` : ""
            }}</span
            >条</span
          >
        </div>
        <table class="table-area">
          <thead>
            <tr>
              <th>
                <div class="line-style" style="justify-content: center;min-width: 48px">序号</div>
              </th>
              <th><div class="line-style">模板名称</div></th>
              <th><div class="line-style">联系人</div></th>
              <th><div class="line-style">认证邮箱</div></th>
              <th><div class="line-style">更新日期</div></th>
              <th><div class="line-style">状态</div></th>
              <th><div class="line-style">操作</div></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list" :key="item.id">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f" title="">{{
                    index + 1 + (page - 1) * pageSize
                  }}</span>
                </div>
              </td>
              <td>
                <div
                  class="line-style"
                  style="justify-content: left;"
                >
                  <div class="template-icon c-icon" v-if="item.type == 0"></div>
                  <div
                    class="template-icon p-icon"
                    v-else-if="item.type == 1"
                  ></div>
                  <span class="normal-f"
                    >{{ item.name
                    }}<span
                      class="b-form-font-button"
                      @click="showDomainList(item.id, item.name)"
                      style="margin: 0"
                      v-if="item.domainCount > 0"
                      >（{{ item.domainCount }}）</span
                    ><span class="c-o" v-if="item.domainCount <= 0"
                      >（{{ item.domainCount }}）</span
                    ></span
                  >
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f f-ell-sin">{{ item.locName }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f f-ell-sin">{{
                    item.email ? item.email : "--"
                  }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.createdTime }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{
                    item.status == 0
                      ? "待审核"
                      : item.status == 1
                      ? "审核中"
                      : item.status == 2
                      ? "审核通过"
                      : item.status == 3
                      ? "审核未通过"
                      : "-"
                  }}</span>
                </div>
              </td>
              <td>
                <div class="line-style normal-f">
                  <div
                    v-if="item.isTemporary == 0"
                    class="form-font-button"
                    @click="templateDetails(item.id)"
                  >
                    详情
                  </div>
                  <div
                    class="form-font-button"
                    v-if="item.status == 3"
                    @click="checkReason(item.description)"
                  >
                    原因
                  </div>
                  <div
                    v-if="item.isTemporary == 0"
                    class="form-font-button"
                    @click="copy(item.id)"
                  >
                    复制
                  </div>
                  <div v-if="item.isTemporary == 0">
                    <div
                      class="form-font-button"
                      v-if="item.domainCount <= 0"
                      @click="deleteItem(item.id)"
                    >
                      删除
                    </div>
                  </div>

                  <div
                    class="b-form-font-button"
                    v-if="item.domainCount > 0"
                    @click="showDomainList(item.id, item.name)"
                  >
                    域名列表
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <Empty-State
          v-if="total != null && total == 0"
          content="未搜索到任何内容！"
        ></Empty-State>
        <div class="form-page-bottom-area flx-row-c-c">
          <Page
            :total="total"
            :current="page"
            :page-size="pageSize"
            :page-size-opts="pageSizeOpts"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
            show-total
          />
        </div>
      </div>
    </div>

    <template-d-n-list-modal
      :show.sync="dnListShow"
      :title="modalTemplateName"
      :templateId="modalTemplateId"
    ></template-d-n-list-modal>
  </div>
</template>

<script>
import { getTemplateList, deleteTemplate, getTemplateCopy } from "@/api/user";
export default {
  name: "VipReminderList",
  components: {
    templateDNListModal: () =>
      import("_c/modal/templateDNListModal/templateDNListModal.vue"),
  },
  data() {
    return {
      loading: false,
      statusList: [
        {
          value: -1,
          label: "全部",
        },
        {
          value: 0,
          label: "待审核",
        },
        {
          value: 1,
          label: "审核中",
        },
        {
          value: 2,
          label: "审核通过",
        },
        {
          value: 3,
          label: "审核未通过",
        },
      ],
      // 表单数据
      status: -1,
      name: "",
      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [],

      // 域名列表数据
      dnListShow: false,
      modalTemplateId: null,
      modalTemplateName: "",
    };
  },
  created() {
    this.getTemplateList();
  },
  methods: {
    // 获取列表
    async getTemplateList() {
      this.loading = true;
      let data = {
        limit: this.pageSize,
        page: this.page,
      };
      if (this.status != -1) {
        data.status = this.status;
      }
      if (this.name != null && this.name != "") {
        data.name = this.name;
      }
      let res = await getTemplateList(data);
      if (res.code == 200) {
        if (
          this.page > 1 &&
          res.data.total <= (this.page - 1) * this.pageSize
        ) {
          this.page =
            res.data.total == 0 ? 1 : Math.ceil(res.data.total / this.pageSize);
          this.getTemplateList();
          return;
        }
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 重置
    reset() {
      this.status = -1;
      this.name = "";
      this.page = 1;
      this.getTemplateList();
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getTemplateList();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    async templateDetails(id) {
      this.$router.push({
        name: "templateDetails",
        query: {
          id: id,
        },
      });
    },
    // 删除模板
    deleteItem(id) {
      this.$Modal.confirm({
        title: "删除确认",
        content: "<p>确定要删除此模板吗？</p>",
        onOk: async () => {
          let res = await deleteTemplate(id);
          if (res.code == 200) {
            this.$Message.success("删除成功！");
            this.getTemplateList();
          }
        },
      });
    },
    // 查看原因
    checkReason(description) {
      this.$Modal.warning({
        title: "审核未通过原因",
        content: `<p>${description ? description : "-"}</p>`,
      });
    },
    // 复制模板
    async copy(id) {
      this.loading = true;
      let res = await getTemplateCopy({
        templateId: id,
      });
      if (res.code == 200) {
        this.$router.push({
          name: "templateadd",
          params: {
            data: res.data,
          },
        });
      }
      this.loading = false;
    },
    // 查看域名列表
    showDomainList(id, name) {
      this.modalTemplateId = id;
      this.modalTemplateName = name + "(域名列表)";
      this.dnListShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.listTable-area {
  padding: 30px;
  position: relative;
  left: -30px;
  width: calc(100% + 60px);
  border-top: 20px solid #f3f6fb;
}
.mg-r-25 {
  margin-right: 25px;
}
.template-icon {
  @include size(16px);
  margin-right: 10px;
  flex-shrink: 0;
}
.c-icon {
  @include bg-setting("t-i-1");
}
.p-icon {
  @include bg-setting("t-i-2");
}
</style>
